<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前台</title>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/tongyao_player-1.3.css" />
    <script type="text/javascript" src="js/tongyao_player-1.3.js"></script>
    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
        .el-row {
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .el-col {
            border-radius: 4px;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
        .link-button {
            color: white;
            text-decoration: none;
            background-color: #90ee90;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        .link-button:hover {
            background-color: #7cb342;
        }
        .el-select .el-input {
            width: 130px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
        p{
            color: #8c939d;
            margin: 0;
        }
        a{
            text-decoration: none;
            color: #8c939d;
        }
        .header{
            margin-bottom: 20px;
        }
        .header{
            background-color:#EBEEF5;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .footer {
            background-color: #f5f5f5;
            padding: 20px 0;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 610px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-links a {
            text-decoration: none;
            color: #333;
            margin-right: 20px;
        }

        .footer-links a:hover {
            color: #007bff;
        }

        .footer-contact {
            display: flex;
            align-items: center;
        }

        .footer-contact i {
            margin-right: 5px;
        }
        .centera{
            text-decoration: none;
            color: black;
        }
        .centera:hover{
            color: orange;
            text-decoration: orange;
            cursor: pointer;
        }

        .page1-specific {
            display: block;
        }

    /*    聊天器*/
        .chatbox-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 300px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            font-family: Arial, sans-serif;
        }

        .chatbox {
            display: flex;
            flex-direction: column;
            height: 100%;
            max-height: 120px;
            overflow-y: auto;

        }
        .chatbox:hover{
            max-height: 300px;
        }

        .chatbox-header {
            background-color: #3498db;
            color: white;
            padding: 10px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .current-time {
            font-size: 14px;
        }

        .chatbox-messages {
            flex-grow: 1;
            padding: 10px;
            overflow-y: auto;
        }

        .message {
            display: flex;
            margin-bottom: 10px;
        }

        .message_avatar_sent {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #3498db;
            margin-right: 10px;
        }
        .message_avatar_received {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #00a699;
            margin-right: 10px;
        }

        .message-text {
            background-color: #fff;
            padding: 10px;
            border-radius: 10px;
            max-width: 70%;
        }

        .message.sent .message-text {
            background-color: #3498db;
            color: white;
        }

        .message.received .message-text {
            background-color: #f2f2f2;
            color: #333;
        }

        .chatbox-input {
            display: flex;
            align-items: center;
            padding: 10px;
        }

        .chatbox-input input {
            flex-grow: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
        }

        .chatbox-input button {
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .chatbox-input button:hover {
            background-color: #2980b9;
        }


        .custom-dropdown {
            position: absolute;
            width: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
            border-top: none;
            z-index: 1000; /* Ensure dropdown is above other elements */
        }

        .custom-dropdown ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .custom-dropdown ul li {
            padding: 8px 16px;
            cursor: pointer;
        }

        .custom-dropdown ul li:hover {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </el-col>
            <el-col :span="4">
                <div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content" style="margin-top: 4px" v-if="isLogin">
                    <p style="position: relative;color: #909399">{{ name }}</p> <!-- 移除了双花括号 -->
                </div>
                <div class="grid-content" style="margin-top: 4px" v-else>
                    您好，
                    <a href="log_in.html">请登录</a>
                    <a href="sign_in.html">免费注册</a>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content " style="margin-top: 4px">
                    || <a href="index.html" class="centera"> 论坛首页</a>&nbsp; ||
                    <a href="center.html" class="centera">个人中心</a>&nbsp; ||
                    <a href="guide.html" class="centera">萌新指南</a>&nbsp; ||
                    <a href="about.html" class="centera">关于我们</a>&nbsp; ||
                    <a href="log_in.html" class="centera" @clike="clear">退出登录</a>&nbsp;
                </div>
            </el-col>
        </el-row>
    </div>

    <div class="header2" style="margin: 0 200px">
        <el-row :gutter="20">
            <el-col :span="4"><div class="grid-content " style="position:relative;top: -17px">
                <img src="logo/logo.png" alt="#"
                     width="250px"
                     height="150px"
                     style="position: relative;right: 20px">

            </div></el-col>
            <el-col :span="18"><div class="grid-content "  style="margin-top: 25px">

                <el-col :span="18"><div class="grid-content ">
                    <div style="margin-top: 15px;">
                        <div>
                            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" style="width: 700px;" @focus="OnBlur" @blur="None" @input="filterResults">
                                <el-select v-model="select" slot="prepend" placeholder="请选择">
                                    <el-option label="用户" value="1"></el-option>
                                    <el-option label="帖子" value="2"></el-option>
                                    <el-option label="论坛" value="3"></el-option>
                                    <el-option label="功能" value="4"></el-option>
                                </el-select>
                                <el-button slot="append"
                                           style="background-color: #409EFF; color: #FFFFFF;width: 80px"
                                           icon="el-icon-search" @click="gotoPage(BidPidUid.bid, BidPidUid.pid, BidPidUid.uid,BidPidUid.id)">
                                </el-button>
                            </el-input>
                        </div>
                    </div>
                </div></el-col>

            </div></el-col>
            <el-col :span="18"><div class="grid-content ">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
                    <el-menu-item index="1">抽奖</el-menu-item>
                    <el-menu-item index="2">首页展示</el-menu-item>
                </el-menu>
                <div class="line"></div>
            </div></el-col>
        </el-row>
    </div>
    <div class="sy" style="display: flex;margin: 0 200px">

        <div class="sy2">

            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
            <el-menu default-active="changeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="changeProducts">

                <el-menu-item index="1" >
                    <i class="el-icon-s-open"></i>
                    <span slot="title">所有分区论坛</span>
                </el-menu-item>
                <el-menu-item index="2" >
                    <i class="el-icon-monitor"></i>
                    <span slot="title">软件应用区</span>
                </el-menu-item>
                <el-menu-item index="3" >
                    <i class="el-icon-ship"></i>
                    <span slot="title">游戏电竞区</span>
                </el-menu-item>
                <el-menu-item index="4" >
                    <i class="el-icon-potato-strips"></i>
                    <span slot="title">生活日常区</span>
                </el-menu-item>
                <el-menu-item index="5" >
                    <i class="el-icon-monitor"></i>
                    <span slot="title">旅游晒图区</span>
                </el-menu-item>
                <el-menu-item index="6" >
                    <i class="el-icon-ship"></i>
                    <span slot="title">动漫漫画区</span>
                </el-menu-item>
                <el-menu-item index="7" >
                    <i class="el-icon-potato-strips"></i>
                    <span slot="title">影视推荐区</span>
                </el-menu-item>
                <el-menu-item index="8">
                    <i class="el-icon-potato-strips"></i>
                    <span slot="title">文学艺术区</span>
                </el-menu-item>



            </el-menu>

        </div>
        <div class="sy1" style="flex: 1">


            <!-- 在两个div之间插入iframe -->
            <div style="flex: 1;">
                <iframe :src="url" frameborder="0" width="100%" height="800px"></iframe>
            </div>
        </div>

    </div>
    <!--    音乐播放器-->
    <div id='tongyao-music'>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=12225964834&auto=1&height=430"></iframe>
    </div>

<!--    聊天器-->
    <div class="chatbox-container" >
        <div class="chatbox" >
            <div class="chatbox-header">
                聊天小助手
                <div class="current-time">{{ currentTime }}</div>
            </div>
            <div class="chatbox-messages" ref="messages">
                <div v-for="(message, index) in messages" :key="index" :class="message.type">
                    <div :class="message.img"></div>
                    <div class="message-text">{{ message.text }}</div>
                </div>
            </div>
            <div class="chatbox-input">
                <input type="text" v-model="newMessage" placeholder="输入消息..."  @keydown.enter="sendMessage">
                <button @click="sendMessage">发送</button>
            </div>
        </div>
    </div>
<!--    搜索栏-->
    <div style="width: 518px; position: absolute; top: 141px; right: 636px; max-height: 200px; min-height: 40px; background-color:#FFFFFF; overflow-y: scroll" v-if="isShow">
        <div style="width: 96%; height: 40px; margin: 0 5px 5px 5px; padding: 4px; background-color: #E4E7ED;display: flex"
             v-for="(item, index) in text.slice(0, 10)"
             :key="item.pid"
             @mouseover="fillInput(item.title,item.bid,item.pid,0)" v-if="select ==2">
            <div style="width: 518px">
                <p>{{ item.title }}</p>
            </div>
        </div>
        <div style="width: 96%; height: 40px; margin: 0 5px 5px 5px; padding: 4px; background-color: #E4E7ED;display: flex"
             v-for="(item, index) in text.slice(0, 10)"
             :key="item.bid"
             @mouseover="fillInput(item.bname,item.bid,0,item.uid)" v-if="select ==3">
            <div style="width: 518px">
                <p>{{ item.bname }}</p>
            </div>
        </div>
        <div style="width: 96%; height: 40px; margin: 0 5px 5px 5px; padding: 4px; background-color: #E4E7ED;display: flex"
             v-for="(item, index) in text.slice(0, 10)"
             :key="item.uid"
             @mouseover="fillInput(item.name,0,0,item.uid)" v-if="select ==1">
            <div style="width: 518px">
                <p>{{ item.name }}</p>
            </div>
        </div>
        <div style="width: 96%; height: 40px; margin: 0 5px 5px 5px; padding: 4px; background-color: #E4E7ED;display: flex"
             v-for="(item, index) in text.slice(0, 10)"
             :key="item.id"
             @mouseover="fillInput(item.name,0,0,0,item.id)" v-if="select ==4">
            <div style="width: 518px">
                <p>{{ item.name }}</p>
            </div>
        </div>
    </div>


    <footer class="footer">
        <div class="footer-content">
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">常见问题</a>
                <a href="#">隐私政策</a>
            </div>
            <div class="footer-contact">
                <i class="fas fa-phone"></i>
                <span>联系电话: 123456789</span>
            </div>
        </div>
    </footer>

</div>



<script>
    new Vue({
        el:'#app',
        mounted(){
            this.thefirst();
            this.updateTime(); // 初始更新时间
            setInterval(this.updateTime, 1000); // 每秒更新时间
        },
        data:{
            activeIndex: '2',
            changeIndex: '',
            isCollapse: false,
            input3: '',
            select: '2',
            url: "show.html",
            name: '',
            password: '',
            isLogin: false,
            typeAll:'',
            currentTime: '',
            messages: [],
            newMessage: '',
            receiverMessage: '',
            //搜索栏
            isShow:false,
            text:[],
            AllPosts:[],
            AllBars:[],
            AllUsers:[],
            BidPidUid:{},
            Basic:[{
                id:1, name: '个人中心'
            },{
                id:2, name: '萌新指南'
            },{
                id:3, name: '秒杀'
            },{
                id:4, name: '退出登录'
            },{
                id:5, name: '关于我们'
            }],
        },
        methods:{
            thefirst(){
                // 在index.html页面加载时读取
                this.name = getCookie("name");
                this.password = getCookie("password");

                if (this.name !=null && this.password !=null){
                    this.isLogin = true;
                }
                // 辅助函数，用于获取cookie的值
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for(let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].trim().split("=");
                        if (cookiePair[0] === name) {
                            return cookiePair[1];
                        }
                    }
                    return "";
                }
                this.$message({
                    message: '欢迎'+this.name,
                    type: 'success'
                });
                this.findAll();
            },
            changeProducts(index){
                // 处理菜单选择事件
                this.changeIndex = index;
                this.url = 'bartype.html';
                if (this.changeIndex ==1 ){
                    this.url = 'bartype.html';
                }
                if (this.changeIndex >=2 ){
                    this.typeAll = this.changeIndex - 1 ;
                    this.url = `bartype.html?type=${this.typeAll}`;
                }
            },
            refreshPage() {
                window.location.reload();
            },
            handleSelect(index) {
                // 处理菜单选择事件
                this.activeIndex = index;
                console.log(this.activeIndex); // 输出 index 变量
                if (this.activeIndex ==1 ){
                    this.url = 'more.html?uid=';
                }
                if (this.activeIndex ==2 ){
                    this.url = 'show.html';
                }
                console.log(this.url);

            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 聊天器
            updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const seconds = now.getSeconds().toString().padStart(2, '0');
                this.currentTime = `${hours}:${minutes}:${seconds}`;
            },
            sendMessage() {
                const message = this.newMessage.trim();
                if (message === '') return;

                this.messages.push({ type: 'message sent', text: message, img:'message_avatar_sent'});
                this.$nextTick(() => {
                    const messagesContainer = this.$refs.messages;
                    axios.get("tools/msg",{params:{msg:message}}).then(x=>{
                        this.receiverMessage = x.data.content;
                        this.messages.push({ type: 'message receiver', text: this.receiverMessage ,img:'message_avatar_received'});
                        this.$nextTick(() => {
                            const messagesContainer = this.$refs.messages;
                            messagesContainer.scrollTop = this.receiverMessage.scrollHeight;
                        });
                    })
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                });

                this.newMessage = '';
            },
            querySearch(queryString, cb) {
                // 模拟异步请求数据
                setTimeout(() => {
                    // 示例数据，应根据 queryString 动态生成
                    const results = ["dad", "faefaefaef"];
                    // 调用回调函数，将结果传递给 el-autocomplete 组件
                    cb(results);
                }, 200); // 假设延迟 200ms 模拟异步请求
            },
            OnBlur() {
                this.isShow = true;
                this.filterResults();
            },
            None(){
                this.isShow = false;
            },
            // 计算两个字符串的相似度，可以根据实际情况定义不同的相似度算法
            calculateSimilarity(input, title) {
                let similarity = 0;
                let similarityPositions = []; // 存储相似字符的位置和距离信息

                // 遍历整个字符串中的字符
                for (let i = 0; i < input.length; i++) {
                    for (let j = 0; j < title.length; j++) {
                        if (input[i] === title[j]) {
                            let dist = Math.abs(i - j); // 计算字符位置的距离
                            similarityPositions.push({ char: input[i], distance: dist });
                            break;
                        }
                    }
                }

                // 按照距离升序排序
                similarityPositions.sort((a, b) => a.distance - b.distance);

                // 计算相似度
                for (let k = 0; k < similarityPositions.length; k++) {
                    similarity += (input.length - k); // 越靠前的字符，贡献的相似度越大
                }
                return similarity;
            },
            findAll(){
                axios.get("posts/getAll").then(x=>{
                    this.AllPosts = x.data;
                    axios.get("bars/getAllBars").then(x=>{
                        this.AllBars = x.data;
                        axios.get("users/getAllUsers").then(x=>{
                            this.AllUsers = x.data;
                        })
                    })
                })

            },
            gotoPage(bid, pid,uid,id) {
                if (bid && pid && !uid){
                    window.location.href = `postdetail.html?bid=${bid}&pid=${pid}`;
                }
                if (bid && !pid && uid){
                    window.location.href = `bardetail.html?b=${bid}&u=${uid}`;
                }
                if (!bid && !pid && uid){
                    window.location.href = `userdetail.html?uid=${uid}`
                }
                if (id == 1){
                    window.location.href = `center.html`
                }
                if (id == 2){
                    window.location.href = `guide.html`
                }
                if (id == 3){
                    window.location.href = `more.html`
                }
                if (id == 4){
                    window.location.href = `log_in.html`
                }
                if (id == 5){
                    window.location.href = `about.html`
                }

            },
            fillInput(title,bid,pid,uid,id) {
                if (this.select == 2){
                    this.input3 = title; // 更新input3的值为当前鼠标悬停的标题
                    this.BidPidUid.bid = bid;
                    this.BidPidUid.pid = pid;
                    this.BidPidUid.uid = 0;
                }
                if (this.select == 3){
                    this.input3 = title; // 更新input3的值为当前鼠标悬停的标题
                    this.BidPidUid.bid = bid;
                    this.BidPidUid.pid = 0;
                    this.BidPidUid.uid = uid;
                }
                if (this.select == 1){
                    this.input3 = title; // 更新input3的值为当前鼠标悬停的标题
                    this.BidPidUid.bid = 0;
                    this.BidPidUid.pid = 0;
                    this.BidPidUid.uid = uid;
                }
                if (this.select == 4){
                    this.input3 = title; // 更新input3的值为当前鼠标悬停的标题
                    this.BidPidUid.bid = 0;
                    this.BidPidUid.pid = 0;
                    this.BidPidUid.uid = 0;
                    this.BidPidUid.id = id;
                }
            },
            filterResults(){
                // 获取输入框的值，假设输入框的值存储在this.input3中
                const inputValue = this.input3.trim().toLowerCase();
                this.text = null;
                if (this.select == 2){
                    // 进行筛选和排序
                    this.text = this.AllPosts
                        .map(post => ({
                            pid: post.pid,
                            bid: post.bid,
                            uid: post.uid,
                            title: post.title,
                            // 计算输入值与标题的接近程度
                            similarity: this.calculateSimilarity(inputValue, post.title.toLowerCase())
                        }))
                        // 根据接近程度降序排序
                        .sort((a, b) => b.similarity - a.similarity);
                    console.log(this.text);
                }
                if (this.select == 3 ){
                    // 进行筛选和排序
                    this.text = this.AllBars
                        .map(bar => ({
                            uid: bar.uid,
                            bid: bar.bid,
                            bname: bar.bname,
                            // 计算输入值与标题的接近程度
                            similarity: this.calculateSimilarity(inputValue, bar.bname.toLowerCase())
                        }))
                        // 根据接近程度降序排序
                        .sort((a, b) => b.similarity - a.similarity);
                    console.log(this.text);
                }
                if (this.select == 1 ){
                    // 进行筛选和排序
                    this.text = this.AllUsers
                        .map(bar => ({
                            uid: bar.uid,
                            name: bar.name,
                            // 计算输入值与标题的接近程度
                            similarity: this.calculateSimilarity(inputValue, bar.name.toLowerCase())
                        }))
                        // 根据接近程度降序排序
                        .sort((a, b) => b.similarity - a.similarity);
                    console.log(this.text);
                }
                if (this.select == 4){
                    // 进行筛选和排序
                    this.text = this.Basic
                        .map(bar => ({
                            id: bar.id,
                            name: bar.name,
                            // 计算输入值与标题的接近程度
                            similarity: this.calculateSimilarity(inputValue, bar.name.toLowerCase())
                        }))
                        // 根据接近程度降序排序
                        .sort((a, b) => b.similarity - a.similarity);
                    console.log(this.text);
                }
            },
            clear(){
                // 清除 Cookies
                document.cookie.split(";").forEach((c) => {
                    document.cookie = c
                        .replace(/^ +/, "")
                        .replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
                });
            },

        },

    })
</script>
</body>
</html>